<template>
  <!-- 商品购买页面 -->
  <div class="mall-page">
    <h1>商品购买页面</h1>

    <div class="content">
      <!-- 搜索框 -->
      <input v-model="searchTerm" class="input-field" placeholder="搜索产品...">
      
      <!-- 商品列表表格 -->
      <table>
        <thead>
          <tr>
            <!-- 点击表头排序 -->
            <th @click="sortData('product')">商品名称</th>
            <th @click="sortData('price')">价格</th>
            <th @click="sortData('quantity')">库存数量</th>
          </tr>
        </thead>
        <tbody>
          <!-- 循环显示每个商品 -->
          <tr v-for="(product, index) in sortedProducts" :key="index">
            <td>{{ product.product }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.quantity }}</td>
            <td>
              <!-- 点击购买按钮 -->
              <button @click="buyProduct(index)">购买</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MallPage',
  data() {
    return {
      // 商品列表数据
      products: [
        { product: '笔记本电脑', price: 3000, quantity: 10 },
        { product: '手机', price: 2000, quantity: 15 },
        { product: '平板电脑', price: 2500, quantity: 8 },
        { product: '耳机', price: 100, quantity: 20 },
        { product: '显示器', price: 800, quantity: 12 },
      ],
      searchTerm: '', // 搜索关键词
      sortKey: '', // 排序关键字
      sortDesc: false, // 是否降序排序
    };
  },
  computed: {
    // 根据排序关键字和顺序排序商品列表
    sortedProducts() {
      if (this.sortKey) {
        return this.filteredProducts.slice().sort((a, b) => {
          const modifier = this.sortDesc ? -1 : 1;
          return modifier * (a[this.sortKey] > b[this.sortKey] ? 1 : -1);
        });
      }
      return this.filteredProducts;
    },
    // 根据搜索关键词过滤商品列表
    filteredProducts() {
      return this.products.filter(product => {
        return product.product.includes(this.searchTerm);
      });
    },
  },
  methods: {
    // 购买商品
    buyProduct(index) {
      const product = this.products[index];
      if (product.quantity > 0) {
        product.quantity--;
        alert('成功购买：' + product.product);
      } else {
        alert('抱歉，该产品已售罄');
      }
    },
    // 根据关键字排序商品列表数据
    sortData(key) {
      if (key === this.sortKey) {
        this.sortDesc = !this.sortDesc;
      } else {
        this.sortKey = key;
        this.sortDesc = false;
      }
    },
  },
};
</script>

<style>
.mall-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
}

.content {
  margin-top: 20px;
  width: 80%;
}

.input-field {
  padding: 5px;
  margin: 5px;
  width: 200px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

button {
  padding: 5px 10px;
  margin: 5px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
</style>